<template>
  <div class="record-report">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="formdata.companyId"
                      :optionlist="xitonglist"
                      @changeSelect="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="日期">
                      <el-date-picker
                        size="small"
                        v-model="formdata.value1"
                        format="yyyy-MM"
                        value-format="yyyyMM"
                        type="monthrange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                      </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="getlist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <TopTitle @command="command" @daochu="daochu" @shuaxin="getlist" />
      <div class="table">
        <TableColumn
          :issize="iissize"
          ref="tabledataref"
          :tableData="tableData"
          :tableConfig="tableConfig"
        >
          <el-table-column label="操作" width="250">
            <template #default="{ row }">
              <div>
                <el-popconfirm title="确认生成吗？" @confirm="toput(row)">
                  <el-link type="primary" slot="reference" :underline="false" class="link">生成</el-link>
                </el-popconfirm>
                <el-link type="primary" :underline="false" @click="$refs.GetTablerefs.tolook(row,'day')" class="link">日预算电量</el-link>
                <el-link type="primary" :underline="false" @click="$refs.GetTablerefs.tolook(row,'hour')" class="link">小时预算电量</el-link>
              </div>
            </template>
          </el-table-column>
        </TableColumn>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getlist"
            :page-size="15"
            :total="total"
          >
        </el-pagination>
      </div>
      <GetTable ref="GetTablerefs" />
    </div>
  </div>
</template>
<script>
import GetTable from './table-column.vue'
import dayjs from 'dayjs'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import TopTooltip from '@/components/TopTitle/newtitle.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import {getStatsListapi,getGenerateapi} from '@/api/energy-consumption/demand/budget-team'
export default {
  name: 'CallPoliceIndex',
  components: {
    GetTable,
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      total: 0,
      pageNo: 0,
      pageSize: 15,
      formdata:{},
      iissize: 'medium',
      xitonglist:[],
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', width: '100', center: 'center' },
        { label: '企业名称', prop: 'companyName' },
        { label: '月份', prop: 'month' },
        { label: '是否生成', prop: 'generateFlag',
          formatter: (row, column, cellValue, index) => {
            return cellValue?'是':'否'
          }
         },
        { label: '生成日期', prop: 'createDate' },
      ]
    }
  },

  async mounted() {
    const { data: { list } } = await getCompanyListApi()
    this.xitonglist = list
    this.formdata={value1:[dayjs().format('YYYY')+'01',dayjs().format('YYYYMM')]}
    const companyId = localStorage.getItem('companyId')
    this.$set(this.formdata,'companyId',companyId?+companyId:list[0].id)
    this.getlist()
  },

  methods: {
    async getlist(){
      this.$refs.tabledataref.loading=true
      const pageNo=this.pageNo-1
      const {companyId,value1} =this.formdata
      const {data:{list,totalCount}}=await getStatsListapi({companyId,yearMonthStart:value1[0],yearMonthEnd:value1[1],pageSize:this.pageSize,pageNo})
      this.total=totalCount
      this.tableData=list
      this.$refs.tabledataref.loading=false
    },
    toput(row) {
      getGenerateapi(row.id).then(res=>{
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'生成成功':res.message
        })
        this.getlist()
      })
    },
    chongzhi(){
        this.formdata={value1:[dayjs().format('YYYY')+'01',dayjs().format('YYYYMM')]}
        const companyId = localStorage.getItem('companyId')
        this.$set(this.formdata,'companyId',companyId?+companyId:list[0].id)
        this.getlist()
    },
    // 导出
    daochu() {
      const {companyId,value1} =this.formdata
      exportexcel(
        '/ecm-microservice-biz/ecm/team/budget/energy/stats/exportExcel',
        {companyId,yearMonthStart:value1[0],yearMonthEnd:value1[1],},
        '班组预算电量统计'
      )
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
    changeqiye(val) {
      localStorage.setItem('companyId', val)
    },
  }
}
</script>
<style lang="scss" scoped>
.record-report {
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .table{
      height: 88%;
      .link{
        margin-right: 10px;
      }
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>
